﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面试结果登记</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/qs@6.10.1/dist/qs.min.js"></script>
    <style>
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .breadcrumb {
            margin-bottom: 20px;
            font-size: 14px;
            color: #333;
        }

        .form-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .action-buttons {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        .interview-form {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 20px;
        }

        .evaluation-select {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <span>您正在做的业务是：人力资源--招聘管理--面试管理--面试结果登记</span>
        </div>

        <div class="form-title">面试结果登记表单</div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <el-button type="primary" v-on:click="submitForm">面试登记</el-button>
            <el-button v-on:click="resetForm">返回</el-button>
        </div>

        <!-- 面试结果登记表单 -->
        <el-form ref="formRef"
                 :model="formData"
                 :rules="rules"
                 label-width="120px"
                 class="interview-form">
            <el-row :gutter="20" class="image-row">
                <el-col :span="16">
                    <!-- 表单内容区域保持不变 -->
                </el-col>
                <el-col :span="8">
                    <el-form-item label="个人照片">
                        <div class="image-container">
                            <img v-if="formData.human_picture" :src="formData.human_picture" class="user-image" alt="个人照片">
                            <el-image v-else class="placeholder-image" src="https://via.placeholder.com/150x200?text=暂无照片" fit="cover"></el-image>
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 职位信息行 - 包含级联选择器 -->
            <el-row :gutter="16">
                @* <el-col :span="8"> *@
                @*     <el-form-item label="职位分类及名称" prop="majorId"> *@
                @*         <el-cascader v-model="selectedCascaderValue" *@
                @*                      :options="cascaderOptions" *@
                @*                      :props="cascaderProps" *@
                @*                      v-on:change="handleCascaderChange" *@
                @*                      placeholder="请选择职位分类及名称" *@
                @*                      :loading="isLoading" /> *@
                @*     </el-form-item> *@
                @* </el-col> *@
                <el-col :span="8">
                    <el-form-item label="职位分类" prop="major_kind_name">
                        <el-select v-model="formData.human_major_kind_name"
                                   placeholder="--请选择--"
                                   v-on:change="handleMajorKindChange">
                            <el-option value="" label="--请选择--"></el-option>
                            <el-option v-for="item in majorKindOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="职位名称" prop="major_name">
                        <el-select v-model="formData.human_major_name"
                                   placeholder="--请选择--"
                                   v-on:change="handleMajorIdChange">
                            <!-- 新增事件 -->
                            <el-option value="" label="--请选择--"></el-option>
                            <el-option v-for="item in majorOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="招聘类型" prop="engage_type">
                        <el-input v-model="formData.engage_type" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 职位信息补充行 -->
           

            <!-- 基本信息行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="姓名" prop="human_name">
                        <el-input v-model="formData.human_name" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="性别" prop="human_sex">
                        <el-input v-model="formData.human_sex" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="EMAIL" prop="human_email">
                        <el-input v-model="formData.human_email" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 联系方式行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="电话号码" prop="human_telephone">
                        <el-input v-model="formData.human_telephone" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="家庭电话" prop="human_homephone">
                        <el-input v-model="formData.human_homephone" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="手机" prop="human_mobilephone">
                        <el-input v-model="formData.human_mobilephone" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 地址信息行 -->
            <el-row :gutter="20">
                <el-col :span="9">
                    <el-form-item label="住址" prop="human_address">
                        <el-input v-model="formData.human_address" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="邮编" prop="human_postcode">
                        <el-input v-model="formData.human_postcode" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 个人信息1行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="国籍" prop="human_nationality">
                        <el-input v-model="formData.human_nationality" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="出生地" prop="human_birthplace">
                        <el-input v-model="formData.human_birthplace" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="生日" prop="human_birthday">
                        <el-input v-model="formData.human_birthday" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 个人信息2行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="民族" prop="human_race">
                        <el-input v-model="formData.human_race" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="宗教信仰" prop="human_religion">
                        <el-input v-model="formData.human_religion" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="政治面貌" prop="human_party">
                        <el-input v-model="formData.human_party" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 个人信息3行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="身份证号码" prop="human_idcard">
                        <el-input v-model="formData.human_idcard" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="年龄" prop="human_age">
                        <el-input v-model="formData.human_age" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="毕业学校" prop="human_college">
                        <el-input v-model="formData.human_college" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="学历" prop="human_educated_degree">
                        <el-input v-model="formData.human_educated_degree" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 教育信息行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="教育年限" prop="human_educated_years">
                        <el-input v-model="formData.human_educated_years" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="学历专业" prop="human_educated_major">
                        <el-input v-model="formData.human_educated_major" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="薪酬要求" prop="demand_salary_standard">
                        <el-input v-model="formData.demand_salary_standard" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="注册时间">
                        <el-input v-model="formData.regist_time" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 个人特长行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="特长" prop="human_specility">
                        <el-input v-model="formData.human_specility" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="爱好" prop="human_hobby">
                        <el-input v-model="formData.human_hobby" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="推荐人" prop="checker">
                        <el-input v-model="formData.checker" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="推荐时间" prop="check_time">
                        <el-input v-model="formData.check_time" readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 个人履历行 -->
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="个人履历" prop="human_history_records">
                        <el-input type="textarea"
                                  v-model="formData.human_history_records"
                                  :rows="4"
                                  readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 备注行 -->
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="备注" prop="remark">
                        <el-input type="textarea"
                                  v-model="formData.remark"
                                  :rows="4"
                                  readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 推荐意见行 -->
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="推荐意见" prop="recomandation">
                        <el-input type="textarea"
                                  v-model="formData.recomandation"
                                  :rows="4"
                                  readonly></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 面试评价1行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="面试次数">
                        <el-input v-model="interviewAmountText" readonly></el-input>
                        <el-input type="hidden" v-model="formData.test_amount"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="形象评价" prop="total_points">
                        <el-select v-model="formData.total_points" class="evaluation-select">
                            <el-option value="A" label="A"></el-option>
                            <el-option value="B" label="B"></el-option>
                            <el-option value="C" label="C"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="口才评价" prop="native_language_degree">
                        <el-select v-model="formData.native_language_degree" class="evaluation-select">
                            <el-option value="A" label="A"></el-option>
                            <el-option value="B" label="B"></el-option>
                            <el-option value="C" label="C"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="外语口语能力" prop="foreign_language_degree">
                        <el-select v-model="formData.foreign_language_degree" class="evaluation-select">
                            <el-option value="A" label="A"></el-option>
                            <el-option value="B" label="B"></el-option>
                            <el-option value="C" label="C"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 面试评价2行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="应变能力" prop="response_speed_degree">
                        <el-select v-model="formData.response_speed_degree" class="evaluation-select">
                            <el-option value="A" label="A"></el-option>
                            <el-option value="B" label="B"></el-option>
                            <el-option value="C" label="C"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="EQ" prop="eq_degree">
                        <el-select v-model="formData.eq_degree" class="evaluation-select">
                            <el-option value="A" label="A"></el-option>
                            <el-option value="B" label="B"></el-option>
                            <el-option value="C" label="C"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="IQ" prop="iq_degree">
                        <el-select v-model="formData.iq_degree" class="evaluation-select">
                            <el-option value="A" label="A"></el-option>
                            <el-option value="B" label="B"></el-option>
                            <el-option value="C" label="C"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="综合素质" prop="multi_quality_degree">
                        <el-select v-model="formData.multi_quality_degree" class="evaluation-select">
                            <el-option value="A" label="A"></el-option>
                            <el-option value="B" label="B"></el-option>
                            <el-option value="C" label="C"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 面试信息行 -->
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="面试人" prop="register">
                        <el-input v-model="formData.register"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="面试时间" prop="registe_time">
                        <el-date-picker v-model="formData.registe_time"
                                        type="datetime"
                                        placeholder="请选择面试时间"
                                        style="width: 100%"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <!-- 面试评价内容行 -->
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="面试评价" prop="pass_checkComment">
                        <el-input type="textarea"
                                  v-model="formData.pass_checkComment"
                                  :rows="4"
                                  placeholder="请输入面试评价"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>

    <script type="text/javascript">
        const { createApp, ref, watch, onMounted } = Vue;
        const { ElMessage } = ElementPlus;

        createApp({
            setup() {
                // 表单数据
                const formData = ref({
                    res_id:null,
                    // 职位信息
                    human_major_kind_id: '',
                    human_major_kind_name: '',
                    human_major_id: '',
                    human_major_name: '',
                    engage_type: '',
                    
                    // 个人基本信息
                    human_name: '',
                    human_sex: '',
                    human_email: '',
                    human_telephone: '',
                    human_homephone: '',
                    human_mobilephone: '',
                    human_address: '',
                    human_picture:'/uploads/2025/06/20/20250620120236201.jpg',
                    human_postcode: '',
                    human_nationality: '',
                    human_birthplace: '',
                    human_birthday: '',
                    human_race: '',
                    human_religion: '',
                    human_party: '',
                    human_idcard: '',
                    human_age: '',
                    human_college: '',
                    human_educated_degree: '',
                    human_educated_years: '',
                    human_educated_major: '',
                    demand_salary_standard: '',
                    regist_time: '',
                    human_specility: '',
                    human_hobby: '',
                    checker: '',
                    check_time: '',
                    human_history_records: '',
                    remark: '',
                    recomandation: '',
                    
                    // 面试评价
                    total_points:'A',
                    test_amount:1,
                    interview_amount: 0,
                    image_degree: 'A',
                    native_language_degree: 'A',
                    foreign_language_degree: 'A',
                    response_speed_degree: 'A',
                    eq_degree: 'A',
                    iq_degree: 'A',
                    multi_quality_degree: 'A',
                    register: '',
                    registe_time: '',
                    pass_checkComment:'',
                    pass_regist_time:''
                });

                // 级联选择器相关数据
                        const selectedCascaderValue = ref([]);
                        const cascaderOptions = ref([]);
                        const cascaderProps = ref({
                            value: 'value',
                            label: 'label',
                            children: 'children'
                        });
                        const isLoading = ref(false);
                // 面试次数显示文本
                const interviewAmountText = ref(`第${formData.value.test_amount}次面试`);

                // 表单验证规则
                const rules = ref({
                    registe_time: [{ required: true, message: '请选择面试时间', trigger: 'blur' }]
                });

                // 表单引用
                const formRef = ref(null);
               // 加载职位级联数据
                        const loadJobCascaderData = async () => {
                            isLoading.value = true;
                            try {
                                const response = await axios.get('/engage/GetJobCascaderData');
                                if (response.status === 200 && response.data) {
                                    cascaderOptions.value = response.data;
                                    console.log(cascaderOptions.value)
                                } else {
                                    throw new Error(response.data?.message || '获取职位数据失败');
                                }
                            } catch (error) {
                                console.error('加载职位数据错误:', error);
                                ElMessage.error('加载职位数据失败，请稍后再试');
                            } finally {
                                isLoading.value = false;
                            }
                        }

                            const handleCascaderChange = (value) => {
                  // 重置职位信息
                  formData.value.human_major_kind_id = '';
                  formData.value.human_major_kind_name = '';
                  formData.value.human_major_id = '';
                  formData.value.human_major_name = '';

                  if (!value || value.length === 0) return;

                  // 处理职位分类
                  if (value.length >= 1) {
                    const category = cascaderOptions.value.find(c => c.value === value[0]);
                    if (category) {
                      formData.value.human_major_kind_id = category.value;
                      formData.value.human_major_kind_name = category.label;

                      // 处理具体职位
                      if (value.length >= 2 && category.children) {
                        const job = category.children.find(j => j.value === value[1]);
                        if (job) {
                          formData.value.human_major_id = job.value;
                          formData.value.human_major_name = job.label;
                        }
                      }
                    }
                  }
                };

                // 级联选择器变化处理
                // const handleCascaderChange = (value) => {
                //     重置职位信息
                //     formData.value.human_major_kind_id = '';
                //     formData.value.human_major_kind_name = '';
                //     formData.value.human_major_id = '';
                //     formData.value.human_major_name = '';

                //     if (!value || value.length === 0) return;

                //     处理职位分类
                //     if (value.length >= 1) {
                //         const category = cascaderOptions.value.find(c => c.value === value[0]);
                //         if (category) {
                //             formData.value.human_major_kind_id = category.value;
                //             formData.value.human_major_kind_name = category.label;

                //             处理具体职位
                //             if (value.length >= 2 && category.children) {
                //                 const job = category.children.find(j => j.value === value[1]);
                //                 if (job) {
                //                     formData.value.human_major_id = job.value;
                //                     formData.value.human_major_name = job.label;
                //                 }
                //             }
                //         }
                //     }
                // };

                // 提交表单
                const submitForm = () => {
          formRef.value.validate(async (valid) => {
            if (valid) {
              try {
                console.log('提交表单数据:', formData.value)
                 const response = await axios.post(
                      "/engage/engage_interview_add",
                      Qs.stringify(formData.value),
                      { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                    );

                    if (response.data.success) {
                      ElMessage.success('提交成功');
                      resetForm();
                    } else {
                      ElMessage.error('提交失败: ' + response.data.message);
                    }
                  } catch (error) {
                    console.error("提交错误:", error);
                    ElMessage.error('提交失败：' + error.message);
                  }
              //   const response = await axios.post(
              //     "/engage/engage_interview_add",
              //    Qs.stringify(formData.value),
              //     { headers: { "Content-Type": "application/json" } }
              //   );

              //   console.log("响应数据:", response.data);
              //   ElMessage.success("提交成功");
              //    window.location.href = "@Url.Action("resumechoose", "engage")";

              // } catch (error) {
              //   console.error("错误:", error.response || error);

              //   显示详细的错误信息
              //   if (error.response?.data?.message) {
              //     ElMessage.error("提交失败：" + error.response.data.message);
              //   } else {
              //     ElMessage.error("提交失败，请检查网络连接");
              //   }
              // }
            } else {
              console.log('表单验证失败');
              return false;
            }
          });
        };

                // 重置表单
                const resetForm = () => {
                    formRef.value.resetFields();
                    history.back();
                };

                // 从URL参数初始化表单数据
                const initFormDataFromUrl = () => {
                    const encodedData = new URLSearchParams(window.location.search).get('data');
                    if (encodedData) {
                        try {
                            const data = JSON.parse(decodeURIComponent(encodedData));
                            // 字段映射逻辑
                            Object.assign(formData.value, {
                                res_id:data.res_id,
                                human_major_kind_id: data.human_major_kind_id || '',
                                human_major_kind_name: data.human_major_kind_name || '',
                                human_major_id: data.human_major_id || '',
                                human_major_name: data.human_major_name || '',
                                engage_type: data.engage_type || '',
                                human_name: data.human_name || '',
                                human_sex: data.human_sex || '',
                                human_email: data.human_email || '',
                                human_telephone: data.human_telephone || '',
                                human_homephone: data.human_homephone || '',
                                human_mobilephone: data.human_mobilephone || '',
                                human_address: data.human_address || '',
                                human_postcode: data.human_postcode || '',
                                human_nationality: data.human_nationality || '',
                                human_birthplace: data.human_birthplace || '',
                                human_birthday: data.human_birthday || '',
                                human_race: data.human_race || '',
                                human_religion: data.human_religion || '',
                                human_party: data.human_party || '',
                                human_idcard: data.human_idcard || '',
                                human_age: data.human_age || '',
                                human_college: data.human_college || '',
                                human_educated_degree: data.human_educated_degree || '',
                                human_educated_years: data.human_educated_years || '',
                                human_educated_major: data.human_educated_major || '',
                                demand_salary_standard: data.demand_salary_standard || '',
                                regist_time: data.regist_time || '',
                                human_specility: data.human_specility || '',
                                human_hobby: data.human_hobby || '',
                                checker: data.checker || '',
                                check_time: data.check_time || '',
                                human_history_records: data.human_history_records || '',
                                remark: data.remark || '',
                                recomandation: data.recomandation || '',
                                interview_amount: data.interview_amount || 1,
                                register: data.register || '',
                                //total_points:data.total_points,
                                //test_amount:data.test_amount,
                                //pass_checkComment:data.pass_checkComment
                            });
                            interviewAmountText.value = `第${formData.value.test_amount}次面试`;
                            
                            // 初始化级联选择器值
                            if (formData.value.human_major_kind_id && formData.value.human_major_id) {
                                selectedCascaderValue.value = [
                                    formData.value.human_major_kind_id,
                                    formData.value.human_major_id
                                ];
                            }
                        } catch (error) {
                            console.error('解析URL数据失败:', error);
                        }
                    }
                };

                // 组件挂载时初始化
                onMounted(() => {
                    // 初始化表单数据
                    initFormDataFromUrl();
                    
                    loadJobCascaderData();
                    // 仅在没有URL数据时使用模拟数据
                    if (!formData.value.human_name) {
                        Object.assign(formData.value, mockData);
                        interviewAmountText.value = `第${formData.value.interview_amount}次面试`;
                    }
                });

                // 监听面试次数变化
                watch(() => formData.value.interview_amount, (newVal) => {
                    interviewAmountText.value = `第${newVal}次面试`;
                });

                return {
                    formData,
                    selectedCascaderValue,
                    cascaderOptions,
                    cascaderProps,
                    isLoading,
                    interviewAmountText,
                    rules,
                    formRef,
                    handleCascaderChange,
                    submitForm,
                    resetForm
                };
            }
        })
        .use(ElementPlus, {
            locale: ElementPlusLocaleZhCn
        })
        .mount('#app');
    </script>
</body>
</html>